import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core'

@Component({
  selector: 'app-ex0202',
  templateUrl: './ex0202.component.html',
  styleUrls: ['./ex0202.component.scss']
})
export class Ex0202Component implements OnInit, AfterViewInit {
  private ctx: any

  private cnv1: any
  private ctx1: any

  @ViewChild('canvas')
  set canvas(ref: ElementRef) {
    this.ctx = ref.nativeElement.getContext('2d')
  }

  @ViewChild('canvas1')
  set canvas1(ref: ElementRef) {
    this.cnv1 = ref.nativeElement
    this.ctx1 = ref.nativeElement.getContext('2d')
  }

  constructor() {
  }

  ngOnInit(): void {
  }

  ngAfterViewInit(): void {
    this.rectColors(this.ctx)
    this.linerColors(this.cnv1, this.ctx1)
  }

  rectColors(ctx: any): void {
    for (let i = 0; i < 6; i++) {
      for (let j = 0; j < 6; j++) {
        ctx.fillStyle = `rgba(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`
        ctx.fillRect(j * 25, i * 25, 25, 25)
      }
    }
  }

  linerColors(cnv: any, ctx: any): void {
    let r = 255
    let g = 0
    let b = 0

    for (let i = 0; i < 150; i++) {
      if (i < 25) {
        g += 10
      } else if (i > 25 && i < 50) {
        r -= 10
      } else if (i > 50 && i < 75) {
        g -= 10
        b += 10
      } else if (i >= 75 && i < 100) {
        r += 10
      } else {
        b -= 10
      }
      ctx.fillStyle = `rgb(${r}, ${g}, ${b})`
      ctx.fillRect(3 * i, 0, 3, cnv.height)
    }
  }
}
